// 获取dom中的元素// 访问dom中的元素
let id = document.getElementById("id");
let classname = document.getElementsByClassName("classname");
let tagname = document.getElementsByTagName("tagname");
let selector = document.querySelector("selectorname");
let selectorall = document.querySelectorAll("selectorname");
let body = document.body();
let html = document.documentElement();
// 对于dom节点属性的访问
let node = document.getElementById("node");
let nodename = node.nodeName;
let nodevalue = node.nodeValue;
let nodetype = node.nodeType;
// 对于DOM节点属性
let childnode = document.childNodes;
let firstchild = document.firstChild;
let lastchild = document.lastChild;
let nextsibling = document.nextSibling;
let previoussibling = document.previousSibling;
let parentnode = document.parentNode;
let textcontent = document.textContent;
// DOM节点方法
let nodetwo = document.getElementById("node");
nodetwo.appendChild(node);
nodetwo.removeChild();
nodetwo.replaceChild(node);
nodetwo.insertBefore(node);
let nodethree = nodetwo.cloneNode();
let bool = nodetwo.hasChildNodes();
// 节点创建方法
let element = document.createElement("p");
let textnode = document.createTextNode("p");
let fragment = document.createDocumentFragment("main");
let attribute = document.createAttribute("em");

//节点属性的修改
let attributes = element.attributes;
let color =element.getAttribute("color");
let del = element.removeAttribute("color");
let boolean = element.hasAttribute();
let removeA = element.removeAttribute("list-sytle");

// 删除dom中的元素
    // 拿到待删除节点: 删除Java
    let self = document.getElementById('java');
    // 拿到父节点:
    let parent = self.parentElement;
    // 删除:
    let removed = parent.removeChild(self);
    alert(removed === self) // true 
    
    let i = document.getElementById("i");
    i.remove();
    // 事件委托
    <ul id="list">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
    <li>666</li>
</ul>

document.getElementById("list").onmouseover = function(event){
    var event = event || window.event; 
    var esrc = event.srcElement || event.target; 
    if(esrc.nodeName.toLowerCase = "li"){
        esrc.style.color = "red";
    }
}
document.getElementById("list").onmouseout = function(event){
    var event = event || window.event; 
    var esrc = event.srcElement || event.target; 
    if(esrc.nodeName.toLowerCase = "li"){
        esrc.style.color = "red";
    }
}
document.getElementById("btn2").onclick = function(){
    let temp = document.getElementById("list").lastElementChild.innerText;
    document.getElementById("list").innerHTML += "<li>"+(parseInt(temp) + 111)+"</li>"
}
    // 实现XMLHttpRequest
    var xhr = new XMLHttpRequest();
    xhr.open('post', url);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById('num_res').value = xhr.responseText;
        }
    }
    xhr.send();

